<template>
  <div id="viewFile"></div>
</template>
<script>
export default {
  props: ["wpsUrl", "token"],
  data() {
    return {
      // 是否开启简易模式
      simpleMode: false,
      isCooperUsersAvatarVisible: false, //是否显示协作用户头像
      cooperUsersColor: [
        {
          userId: "xxxxxx", // 用户id
          color: "#F65B90" // 用户光标颜色
        }
      ]
    };
  },
  mounted() {
    this.openWps(this.wpsUrl, this.token);
  },
  methods: {
    openWps(url, token) {
      let _this = this;
      const wps = _this.wps.config({
        mode: _this.simpleMode ? "simple" : "normal",
        mount: document.querySelector("#app"),
        wpsUrl: url,
        commandBars: [
          // 可以配置多个组件
          {
            cmbId: "HistoryVersion",
            attributes: {
              visible: false, // 隐藏组件
              enable: false // 禁用组件， 组件显示但不响应点击事件
            }
          },
          {
            cmbId: "HistoryVersionDivider",
            attributes: {
              visible: false, // 隐藏组件
              enable: false // 禁用组件， 组件显示但不响应点击事件
            }
          },
          {
            cmbId: "HistoryRecord",
            attributes: {
              visible: false, // 隐藏组件
              enable: false // 禁用组件， 组件显示但不响应点击事件
            }
          }
        ]
      });
      wps.setToken({ token: token });
      let app = wps.Application;
      // this.console.log(JSON.stringify(app));
    }
  }
};
</script>
<style lang='scss' scoped>
#viewFile {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
}
</style>
